<template>
  <div>
    <xdh-map style="height:76vh">
      <xdh-map-popup ref="popup"
                     :position="[120, 30]"
                     :offset="[0,-30]"
                     title="车辆信息"
                     :stop-event="true"
                     :v-if="true"
                     width="200px">
        <div><span style="font-weight: bold;">名称:</span>我的车辆</div>
        <div><span style="font-weight: bold;">车牌:</span>京GUH986</div>
        <div><span style="font-weight: bold;">地址:</span>浙江省杭州市西溪湿地</div>
      </xdh-map-popup>
      <xdh-map-image v-bind="options" @click="showPopup"></xdh-map-image>
    </xdh-map>
  </div>  
</template>

<script>
  import 'xdh-map/lib/xdhmap.css'
  import {XdhMap, XdhMapPopup, XdhMapImage} from 'xdh-map'
  
  export default {
    components: {
     XdhMap,
     XdhMapPopup,
     XdhMapImage
   },
    data() {
      return {
        active: false,
        options: {
          position: [120, 30],
          src: require('@/assets/location.png')
        }
      }
    },
    methods: {
      showPopup() {
        this.$refs.popup.show()
      }
    },
    mounted() {
      // setTimeout(() => {
      //   this.active = true
      // }, 200)
    }
  }
</script>